<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .middleBox {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            position: relative;
        }

        .middleBox img {
            width: 400px;
            height: 400px;
        }

        .shade {
            width: 100px;
            height: 100px;
            background: yellow;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0.5;
            display: none;
        }

        .smallBox {
            margin-top: 10px;

        }

        .smallBox img {
            border: 1px solid #000;
            margin-left: 5px;
            width: 50px;
            height: 50px;
        }

        .smallBox img.active {
            border-color: red;
        }

        .box {
            margin: 50px;
            width: 402px;
            position: relative;
        }

        .bigBox {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            position: absolute;
            top: 0;
            left: 105%;
            display: none;
            background-image: url(./images/big1.jpg);
            background-position: 0 0;
            background-size: 1600px 1600px;
            background-repeat: no-repeat;
        }

        .shade:hover {
            cursor: move;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="middleBox">
            <img src="day22/代码/images/big1.jpg" width="400" height="400">
            <div class="shade"></div>
        </div>
        <div class="smallBox">
            <img class="active" src="day22/代码/images/big1.jpg">
            <img src="day22/代码/images/big2.jpg" alt="">
        </div>
        <div class="bigBox"></div>
    </div>
</body>

</html>
<script>
    // 1、获取常用的dom对象
    const boxDom = document.querySelector('.box');
    const middleBoxDom = document.querySelector('.middleBox');
    const smallBoxImgsDom = document.querySelectorAll('.smallBox>img');
    const bigBoxDom = document.querySelector('.bigBox');
    const shadeDom = document.querySelector('.shade');
    // 2、实现小图的点击修改中图跟大图
    smallBoxImgsDom.forEach(item => {
        // 每一个小图片绑定点击事件
        item.onclick = function () {
            // 实现被点击的存在红色边框效果
            smallBoxImgsDom.forEach(dom => dom.className = '')
            this.className = 'active';
            // 实现修改中图
            // middleBoxDom.querySelector('img') 表示在middleBoxDom 的标签中继续寻找img标签的dom对象
            middleBoxDom.querySelector('img').src = this.src;
            //修改大图的背景图片    
            bigBoxDom.style.backgroundImage = `url(${this.src})`;
        }
    })

    // 3、鼠标划入事件
    middleBoxDom.onmouseover = function () {
        // 显示遮罩
        shadeDom.style.display = 'block';
        // 鼠标划入后移动事件开始生效
        middleBoxDom.onmousemove = function (event) {
            // offsetX/Y 获取坐标点相对于元素的位置,在移动过程中 事件源可能是img标签也可能是遮罩 导致所取出来的xy值错误的，最终导致抖动
            let x = event.clientX;
            let y = event.clientY;
            // 获取遮罩的宽高一半
            let shadeWidthBan = shadeDom.clientWidth / 2;
            let shadeHeightBan = shadeDom.clientHeight / 2;
            // 限制 xy的坐标点
            // 如果获取到x的坐标点比 box左侧距离+遮罩一般 还要小 就固定在左侧
            if (x < boxDom.offsetLeft + shadeWidthBan) {
                x = boxDom.offsetLeft + shadeWidthBan;
            }
            // 如果x 坐标 值大于box距离左侧的距离 + box的宽度 - 遮罩的一半
            if (x > boxDom.offsetLeft - shadeWidthBan + boxDom.clientWidth) {
                x = boxDom.offsetLeft - shadeWidthBan + boxDom.clientWidth;
            }

            if (y < boxDom.offsetTop + shadeHeightBan) {
                y = boxDom.offsetTop + shadeHeightBan;
            }
            if (y > boxDom.offsetTop - shadeHeightBan + middleBoxDom.clientHeight) {
                y = boxDom.offsetTop - shadeHeightBan + middleBoxDom.clientHeight;
            }

            // 由于遮罩定位是按照middleBox进行计算的 xy 坐标点是以浏览器左上角计算。所以需要减掉整个box盒子水平与垂直的距离 offsetLeft offsetTop获取到相对于上级元素的定位偏移量
            shadeDom.style.left = x - boxDom.offsetLeft - shadeWidthBan + 'px';
            shadeDom.style.top = y - boxDom.offsetTop - shadeHeightBan + 'px';

            // 计算遮罩与中图的百分比
            let xBfb = shadeDom.offsetLeft / middleBoxDom.clientWidth;
            let yBfb = shadeDom.offsetTop / middleBoxDom.clientHeight;
            // 计算大图的完整尺寸
            let bigBoxImgSize = getStyle(bigBoxDom, 'backgroundSize');
            // 提取出背景图片的宽高
            let bigBoxImgWidth = parseInt(bigBoxImgSize.split(" ")[0]);
            let bigBoxImgHeight = parseInt(bigBoxImgSize.split(" ")[1]);
            console.log(bigBoxImgWidth, bigBoxImgHeight);
            let xMove = bigBoxImgWidth * xBfb;
            let yMove = bigBoxImgHeight * yBfb;
            // 设置position
            bigBoxDom.style.backgroundPosition = -xMove + 'px -' + yMove + 'px'
            // 显示大图
            bigBoxDom.style.display = 'block';
        }
    }
    // 4、鼠标划出
    middleBoxDom.onmouseout = function () {
        // 隐藏遮罩
        shadeDom.style.display = 'none';
        // 隐藏大图
        bigBoxDom.style.display = 'none';
        // 设置移动事件解绑
        middleBoxDom.onmousemove = null;
    }


    /**
 * 获取标签指定的的样式
 * @param {Document} elem 需要获取样式的元素的dom对象
 * @param {String} attr 获取样式的名称
 * @returns String
 */
    function getStyle(elem, attr) {
        if (window.getComputedStyle) {
            // 表示window下存在getComputedStyle属性 说明绝对是IE高版本
            return window.getComputedStyle(elem)[attr];
        }
        // 代码走到这里绝对可以证明是IE低版本
        return elem.currentStyle[attr];
    }
</script>